<template>
  <div class="broadcast-body">
    <div
      class="broadcast-cont"
      v-for="(item,index) in broadList"
      :key="index"
      :style="{borderColor:info.labelColor}"
    >
      <p>
        <span :style="{background:info.labelColor}"></span>主持人
      </p>
      <label>{{item.time | filterDate}}</label>
      <div>{{item.graphicText}}</div>
      <div class="listImg" id="dowebok">
        <viewer :images="item.graphicSrcs">
          <div v-if="item.graphicSrcs !=null && item.graphicSrcs.length==1">
            <img
              v-for="(info,i) in item.graphicSrcs"
              :src="info"
              :key="i"
              @click="imgs"
              style="width:50%;height:auto;"
            >
          </div>
          <div v-else-if="item.graphicSrcs !=null && item.graphicSrcs.length==2">
            <img
              v-for="(info,i) in item.graphicSrcs"
              :src="info"
              :key="i"
              @click="imgs"
              style="width:50%;height:150px;"
            >
          </div>
          <div v-else>
            <img v-for="(info,i) in item.graphicSrcs" :key="i" :src="info" @click="imgs">
          </div>
        </viewer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      broadList: [],
    };
  },
  computed: {
    info() {
      return this.$store.state.liveInfo;
    },
  },
  filters: {
    filterDate(t) {
      if (t) {
        let myDate = new Date(); //获取当前时间
        let nowTime = myDate.getTime(); //当前时间戳
        let nowyear = myDate.getFullYear(); //当前年份
        nowTime = parseInt(nowTime / 1000); //当前秒数
        let today = myDate.getDate();
        let data = t;
        let year = data.substring(0, 4); //发表的年份
        let hm = data.substring(11, 16); //发表的时和分
        let md = data.substring(5, 10); //发表的月和日
        let otoday = data.substring(8, 10);
        let timestamp = parseInt(new Date(data).getTime()); //发表的时间戳
        timestamp = timestamp / 1000; //发表的时间秒数
        let timecha = nowTime - timestamp; //时间差
        let yearcha = nowyear - year; //年份差
        let todaycha = today - otoday;
        let showtime = "";
        if (yearcha < 1) {
          if (todaycha == 0) {
            showtime = hm;
          } else {
            showtime = md + " " + hm;
          }
        } else {
          showtime = data;
        }
        return showtime;
      }
    }
  },
  methods: {
    // 获取历史数据
    getChatList() {
      this.$http
        .get(this.$api.graphicinfoList(), {
          params: {
            roomId:this.$route.params.id,
            page: 1,
            limit: 100
          }
        })
        .then(res => {
          this.broadList = res.data.page.list;
        });
    },
    testStatus(info) {
      if (info.status == 0) {
        this.videoplaySwitch(info);
      } else if (info.status == 1) {
        //直播
        this.$store.state.liveImgShow = true;
      } else if (info.status == 2) {
        //暂停
        this.videoplaySwitch(info);
      } else if (info.status == 3) {
        //结束
        this.videoplaySwitch(info); //未开始
      }
    },
    videoplaySwitch(info) {
      if (info.videoplaySwitch > 0) {
        this.$store.state.liveImgShow = true;
      } else {
        this.$store.state.liveImgShow = false;
      }
    },
    imgs() {
      // 视频关闭
      this.$store.state.liveImgShow = false;
      var self = this;
      setTimeout(() => {
        $(".viewer-button").click(function() {
          self.testStatus(self.$store.state.liveInfo);
        });
        $(".viewer-canvas").click(function() {
          self.testStatus(self.$store.state.liveInfo);
        });
      }, 100);
    }
  },
  created() {
    this.getChatList();
  }
};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
.broadcast-body {
  width: calc(100% - 30px);
  padding: 10px 0 10px 10px;
  background: #fff;
  text-align: left;
}
.broadcast-cont {
  padding: 0 5px 0 10px;
  position: relative;
  width: 100%;
  border-left: 1px dashed #e7ca3a;
  float: left;
  p {
		font-size: 16px;
    line-height: 30px;
    span {
      background: #e7ca3a;
      border-radius: 10px;
      width: 10px;
      height: 10px;
      position: absolute;
      display: block;
      left: -5px;
      top: 10px;
    }
  }
  label {
    font-size: 12px;
    color: #999;
  }
  div {
    font-size: 14px;
    color: #666;
    line-height: 20px;
  }
}
.listImg {
  margin-top: 10px;
}
.listImg img {
  width: 31%;
  height: 110px;
  float: left;
  padding: 0 5px 5px 0;
}
</style>
